<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="content">
			<div class="left">
				<!-- 小圆点 -->
				<div class="yd">
					<div class="y1"></div>
					<div class="y2"></div>
					<div class="y3"></div>
					<div class="y4"></div>
					<div class="y5"></div>
					<div class="y6"></div>
				</div>
				<!-- 横线 -->
				<span></span>
				<div class="jl">
					<!-- 说明 -->
					<div class="sm">
						<strong>技能</strong>

					</div>
					<div class="nr">
						<div class="s1">
							PR
						</div>
						<div class="s2">
							AE
						</div>
						<div class="s1">
							DW
						</div>
						<div class="s2">
							C
						</div>
						<div class="s1">
							JAVA
						</div>
						<div class="s2">
							CSS
						</div>
						<div class="s1">
							script
						</div>
						<div class="s2">
							GO
						</div>
						<div class="s1">
							C#
						</div>
						<div class="s2">
							c++
						</div>
					</div>
				</div>
			</div>

			<div class="right">
				<span></span>
				<div class="con">
					<p>
						<strong style="color: #fff; ">console</strong>
						<strong style="color: #aa0000; ">.</strong>
						<strong style="color: #55ffff;">log</strong>
						<strong style="color: #fff; ">(</strong>
						<strong style="color: #ffaaff;">"</strong>
						<strong style="color: #aa0000; ">hello word</strong>
						<strong style="color: #ffaaff; "> "</strong>
						<strong style="color: #fff; ">)</strong>
					</p>
				</div>
				<!-- 个人说明 -->
				<div class="its">
					<p class="p">姓名:小诸葛</p>
					<p class="p">年龄:21</p>
					<p class="p">电话:100*****000</p>
					<p class="p">
						个人说明：通过专业课程的学习，我现已具有较强的计算机操作能力和专业软件的使用。
						精通office、wps软件，熟练使用QuartusII、MA_+plusII、AltiumDesigner6、AltiumD_P2004、Protel99SE软件，精通veriloghdl、vhdl、c语言。计算机硬件方面，我熟悉其组成原理，能够熟练地进行计算机地组装，
						独立排除计算机地各种故障。已过CET4和CET6，计算机一、二、三级，考取中级秘书证、普通话二乙等证书。
					</p>
				</div>
			</div>
			<div class="y">
				<img src="img/tj.png">
			</div>
			<!-- 按钮 -->
			<div class="btn">
				<div class="bts">

				</div>
			</div>
		</div>

		<script>
			console.log('hello word')
			let y = document.querySelector(".y")
			let lspan = document.querySelector(".left span")
			let rspan = document.querySelector(".right span")
			let tdy = document.querySelector(".yd")
			let jl = document.querySelector(".jl")
			let btn = document.querySelector(".btn")
			let bts = document.querySelector(".bts")
			let con = document.querySelector(".con")
			let sm = document.querySelector(".sm")
			let nr = document.querySelector(".nr")
			let s1 = document.querySelectorAll(".s1")
			let its = document.querySelector(".its")
			let content = document.querySelector(".content")
			let left = document.querySelector(".left")
			let right = document.querySelector(".right")


			console.log(s1)
			y.addEventListener("click", function() {
				lspan.className = "lspan"
				rspan.className = "rspan"
				tdy.className = "dys"
				jl.className = "jls"
				y.className = "ys"
				con.className = "conn"
				btn.className = "btnn"
				bts.className = "btss"
				sm.className = "smm"
				nr.className = "nrr"
				left.className = "leftt"
				right.className = "rightt"

				s1.forEach(function(v) {
					v.className = "sss"
				})

			})
			bts.addEventListener("click", function() {
				btn.className = "tto"
				its.className = "itsss"
				content.className = "contt"
			})
		</script>
	</body>
</html>